<template>
	<view class="page">
		<view class="content">
			<view class="info">
				<view class="top">
					<view class="left">
						<u--text text="中国海油海港路站"></u--text>
						<u--text text="海港大道39号" color="#767676" size="12"></u--text>
					</view>
					<view class="right">
						<u--text text="02号枪"></u--text>
					</view>
				</view>
				<view class="bottom">
					M100
				</view>
			</view>
			<view class="price">
				<u-input placeholder="请输入预付款金额" border="bottom" type="number" :value="value"></u-input>
			</view>
			<view class="bottom" @click="goToUrl('/pages/pay/counter')">
				<u-button color="#3662EC" text="在线支付预付款" shape="circle"></u-button>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			value: ""
		}
	},
	methods: {

	}
}
</script>
<style lang="scss" scoped>
.content {
	padding: 30rpx 40rpx;

	.info {
		background-color: white;
		border-radius: 10px;
		padding: 30rpx 40rpx;
		margin-top: 40rpx;

		.top {
			display: flex;
			justify-content: space-between;
		}

		.bottom {
			font-size: 30rpx;
			color: white;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #3662EC;
			width: max-content;
			padding: 16rpx 40rpx;
			border-radius: 12rpx;
			margin-top: 30rpx;
		}

	}

	.price {
		background-color: white;
		border-radius: 10px;
		padding: 40rpx 40rpx 20rpx 40rpx;
		margin-top: 40rpx;
	}

	.bottom {
		padding: 0 100rpx;
		margin-top: 300rpx;
	}
}
</style>
